import { select } from "d3-selection";
import { transition } from "d3-transition";
import { easeBackInOut } from "d3-ease";
import radialMove from "./radialMove";

const cx = 302; // 圆心
const cy = 302; // 圆心
const sr = 70; // 小圆
const radial = 170; // 径向移动的半径

const animation = transition()
  .delay(300)
  .duration(1000)
  .ease(easeBackInOut);

export default function main(source, oncircleClick) {
  const svg = select("#box");
  const data = radialMove({ source, cx, cy, r: radial });

  // 小圆
  const items = svg
    .selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .on("click", oncircleClick)
    .attr("class", d => {
      return d.index === 0 ? "group tagActive" : "group";
    });

  items
    .append("circle")
    .attr("cx", cx)
    .attr("cy", cy)
    .attr("r", sr)
    .attr("class", "bubble")
    .attr("stroke", getColor)
    .attr("fill", getColor);

  // 文本
  items
    .append("foreignObject")
    .attr("x", cx - sr + 10)
    .attr("y", cy - 30)
    .attr("width", 2 * sr - 20)
    .attr("height", 70)
    .append("xhtml:p")
    .text(d => d.name)
    .attr("fill", "black")
    .attr("class", "name")
    .style("font-size", "18px")
    .style("color", "white")
    .style("text-align", "center");

  // 移动
  items
    .transition(animation)
    .style("transform", d => `translate(${d.mx}px, ${d.my}px)`);
}

function getColor(d) {
  const maps = { 5: 3, 6: 2 };
  const index = maps[d.index] || d.index;
  const num = index % 5;
  return `url(#g${num})`;
}
